<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>三级联动示例 </title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet"> 
	<!-- Bootstrap-select -->
    <link href=.../../statics/plugins/bootstrap-select-1.12.3/css/bootstrap-select.min.css" rel="stylesheet"> 
	
	<!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet"> 
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
         
        <!-- page content -->
        <div class="framebody" role="main" >
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>三级联动示例</h3>
              </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">

              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_content">
 					<form class="form-horizontal form-label-left">
                  		<div class="item form-group">
                  			<label class="control-label col-md-1">省市区三级：</label>
	                        <div class="col-md-6">
	                        	<select id="level1" class="selectpicker" title="省" data-live-search="true" data-width="180px"></select>
	                        	<select id="level2" class="selectpicker" title="市" data-live-search="true" data-width="150px"></select>
	                        	<select id="level3" class="selectpicker" title="区" data-live-search="true" data-width="150px"></select>
	                        </div>
                  		</div>
                  	</form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        
      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>  
    <!-- Bootstrap-select -->
    <script src=.../../statics/plugins/bootstrap-select-1.12.3/js/bootstrap-select.min.js"></script>
    <script src=.../../statics/plugins/bootstrap-select-1.12.3/js/i18n/defaults-zh_CN.min.js"></script>
    
    <script src=.../../statics/json/region.js"></script>  
     
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>

	<script>
		$.each(CHINA_REGIONS, function(index, obj){
			if (obj.pid == '1'){
				$('#level1').append('<option value="'+obj.id+'" >'+obj.name+'</option>');
			}
		})
		$('#level1').selectpicker('refresh')
		$('#level1').on('changed.bs.select', function (e) {
		  	var provinceId = $(this).selectpicker('val');  
		  	$('#level2').empty();
		  	$('#level3').empty().selectpicker('refresh');
		  	$.each(CHINA_REGIONS, function(index, obj){
				if (obj.pid == provinceId){
					$('#level2').append('<option value="'+obj.id+'" >'+obj.name+'</option>');
				}
			})
			$('#level2').selectpicker('refresh')
		});
		$('#level2').on('changed.bs.select', function (e) {
		  	var cityId = $(this).selectpicker('val');  
		  	$('#level3').empty();
		  	$.each(CHINA_REGIONS, function(index, obj){
				if (obj.pid == cityId){
					$('#level3').append('<option value="'+obj.id+'" >'+obj.name+'</option>');
				}
			})
			$('#level3').selectpicker('refresh')
		});
	</script>
  </body>
</html>